import { queryParkinglotNames } from '@/pages/Parking/Spot/service';
import { queryCompanies } from '@/pages/SystemUser/service';
import { SettingFilled } from '@ant-design/icons';
import { DrawerForm, ProFormSelect } from '@ant-design/pro-components';
import { Button } from 'antd';
import { AboStatusOptions, AboTypeOptions } from '../../abnormal-order';

const FilterDrawer = (props: FilterDrawerProps) => {
  const { onOk, selectVal, canSearchUser } = props;
  return (
    <DrawerForm<PropsSelectValType>
      width={500}
      title={false}
      trigger={
        <Button type="link" style={{ color: 'black', marginRight: 50 }}>
          <SettingFilled style={{ fontSize: 22, verticalAlign: 'middle' }} />
          <span>筛选</span>
        </Button>
      }
      drawerProps={{
        destroyOnClose: false,
        maskClosable: false,
        placement: 'right',
        closable: false,
      }}
      onFinish={async (values) => {
        onOk(values);
        return true;
      }}
      initialValues={selectVal}
    >
      {canSearchUser && (
        <ProFormSelect
          name="ownerId"
          mode="multiple"
          label="选择特定用户"
          debounceTime={300}
          showSearch
          placeholder="选择特定用户的异常记录(支持多选)"
          request={(val) => queryCompanies(val.keyWords)}
        />
      )}
      <ProFormSelect
        name="parkingLotId"
        mode="multiple"
        label="选择特定路段"
        debounceTime={300}
        showSearch
        placeholder="请选择特定路段的异常记录(支持多选)"
        request={(val) => queryParkinglotNames(val.keyWords)}
      />
      <ProFormSelect
        name="type"
        mode="multiple"
        label="选择特定类型"
        placeholder={'选择特定类型的异常记录(支持多选)'}
        options={AboTypeOptions}
      />
      <ProFormSelect
        name="status"
        mode="multiple"
        label="选择特定状态"
        placeholder={'选择特定状态的异常记录(支持多选)'}
        options={AboStatusOptions}
      />
    </DrawerForm>
  );
};

export default FilterDrawer;
